<div class="container-fluid">
    <form class="form-horizontal dmdb-block" id="createProjectForm" >
      <div class="dmdb-block-title" data-toggle="collapse" href="#projectDiv">
        <div class="padding-left-5">
          Project Details <i class="icon-circle-arrow-down icon-white"></i>
        </div>
      </div>
      <div id="projectDiv" class="projectDiv">
        <div class="row-fluid">
          <div class="span12">
            <div class="row-fluid">
              <div class="span6 left-divider">
                <div class="row-fluid">
                  <div class="control-group span6">
                    <label class="control-label" for="requestId">Request Id:</label>
                    <div class="controls">
                      <select id="requestId" name="serviceRequestId" x-ng-model="project.serviceRequestId">
                        <option value="">Select</option>
                        <option value="1">48020</option>
                        <option value="2">58020</option>
                      </select>
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="projectId">Project Id:</label> <label class="valueLabel">{{project.id}}</label>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span6">
                    <label class="control-label" for="projectName">Project Name:</label>
                    <div class="controls">
                      <input type="text" name="name" id="projectName" placeholder="Project Name" x-ng-model="project.name" />
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="projectReference">Project Reference:</label>
                    <div class="controls">
                      <input type="text" name="reference" id="projectReference" placeholder="Project Reference" x-ng-model="project.reference" />
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="">
                    <div class="control-group span6">
                      <label class="control-label" for="customerName">Customer Name:</label>
                      <div class="controls">
                        <input type="text" name="custName" id="customerName" placeholder="Customer Name" x-ng-model="project.custId" />
                      </div>
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="status">Status:</label> <label class="valueLabel">{{project.status}}</label>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span12">
                    <label class="control-label" for="description">Description:</label>
                    <div class="controls">
                      <textarea name="description" id="description" rows="2" x-ng-model="description"></textarea>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span6">
                    <label class="control-label" for="plannedStartDate">Planned Start Date:</label>
                    <div class="controls">
                      <div id="plannedStartDateDiv" class="input-append date">
                        <input data-format="yyyy-MM-dd" name="plannedStartDate" placeholder="yyyy-MM-dd" id="plannedStartDate" type="text" x-ng-model="plannedStartDate" />
                        <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i></span>
                      </div>
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="actualStartDate">Actual Start Date:</label>
                    <div class="controls">
                      <div id="actualStartDateDiv" class="input-append date">
                        <input data-format="yyyy-MM-dd" name="actualStartDate" x-ng-model="actualStartDate" placeholder="yyyy-MM-dd" id="actualStartDate" type="text" /> <span class="add-on"> <i data-time-icon="icon-time"
                          data-date-icon="icon-calendar"> </i></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span6">
                    <label class="control-label" for="plannedEndDate">Planned End Date:</label>
                    <div class="controls">
                      <div id="plannedEndDateDiv" class="input-append date">
                        <input name="plannedEndDate" x-ng-model="plannedEndDate" data-format="yyyy-MM-dd" placeholder="yyyy-MM-dd" id="plannedEndDate" type="text" /> <span class="add-on"> <i data-time-icon="icon-time"
                          data-date-icon="icon-calendar"> </i></span>
                      </div>
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="actualEndDate">Actual End Date:</label>
                    <div class="controls">
                      <div id="actualEndDateDiv" class="input-append date">
                        <input data-format="yyyy-MM-dd" name="actualEndDate" x-ng-model="actualEndDate" placeholder="yyyy-MM-dd" id="actualEndDate" type="text" /> <span class="add-on"> <i data-time-icon="icon-time"
                          data-date-icon="icon-calendar"> </i></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="">
                    <div class="control-group span6">
                      <label class="control-label" for="plannedDuration">Planned Duration:</label> <label class="valueLabel">10 days</label>
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="actualDuration">Actual Duration:</label> <label class="valueLabel">10 days</label>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span6">
                    <label class="control-label" for="customerRequiredDate">Customer Required Date:</label>
                    <div class="controls">
                      <div id="customerRequiredDateDiv" class="input-append date">
                        <input data-format="yyyy-MM-dd" name="" placeholder="yyyy-MM-dd" id="customerRequiredDate" type="text" /> <span class="add-on"> <i data-time-icon="icon-time"
                          data-date-icon="icon-calendar"> </i></span>
                      </div>
                    </div>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="changedBy">Changed by:</label>
                    <div class="controls">
                      <div class="btn-group" data-toggle="buttons-radio">
                        <button type="button" class="btn">BT</button>
                        <button type="button" class="btn">Customer</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span12">
                    <label class="control-label" for="reasonForChange">Reason for change:</label>
                    <div class="controls">
                      <textarea name="" id="reasonForChange" rows="2"></textarea>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span12 padding-right-10">
                    <button type="button" id="clearProject" class="btn pull-right">Clear</button>
                    <button type="button" x-ng-click="create(project)" id="createProject" class="btn btn-primary pull-right margin-right-10">Save Details</button>
                  </div>
                </div>
              </div>
              <div class="span6">
                <div class="row-fluid">
                  <div class="control-group span6">
                    <label class="control-label">RAG Status:</label> <label class="valueLabel"><span class="label label-success">{{project.ragStatus}}</span></label>
                  </div>
                  <div class="control-group span6">
                    <label class="control-label" for="managerRag">Manager RAG:</label>
                    <div class="controls">
                      <select name="managerRagStatus" id="managerRagId" x-ng-model="project.managerRagStatus">
                        <option value="select">Select</option>
                        <option value="Green" selected="selected">Green</option>
                        <option value="Amber">Amber</option>
                        <option value="Red">Red</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span12">
                    <label class="control-label" for="notes">Project Notes:</label>
                    <div class="controls">
                      <textarea name="" id="notes" rows="2"></textarea>
                    </div>
                  </div>
                </div>
                <div class="row-fluid">
                  <div class="control-group span12 padding-right-10">
                    <button type="button" id="addNotes" class="btn pull-right">Add</button>
                  </div>
                </div>
                <div class="row-fluid">
                  <table class="table table-hover table-bordered">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Added by</th>
                        <th>Note</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>1</td>
                        <td>08-13-2013</td>
                        <td>Mark Hunkin</td>
                        <td>Project has begun</td>
                      </tr>
                      <tr>
                        <td>2</td>
                        <td>08-12-2013</td>
                        <td>Richard Hoggett</td>
                        <td>Project has been approved</td>
                      </tr>
                      <tr>
                        <td>3</td>
                        <td>08-11-2013</td>
                        <td>Chris Roger</td>
                        <td>Project awaiting customer approval</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
    <h3>Sites Grid</h3>
    	<a ng-click="openProjectSite('Site 101', 101)" href="#siteslist">Site 101</a><br>
		<a ng-click="openProjectSite('Site 102', 102)" href="#siteslist">Site 102</a>
	
  
  </div>

